// import { Link, Route, Redirect, NavLink, Switch } from 'react-router-dom'
// import Home from './views/Home';
// import About from './views/About';
// import Homes from './views/Homes';
// import Detail from './views/Detail';
import RootView from "./router"
import routes from "./router/config"
import './App.css';

function App() {
  return (
    <div className="App">
      <RootView routes = { routes }/>

      {/* <Route path="/home"/>
      <Route path="/about"/>
      <Route path="/login"/> */}







      {/* NavLink  和   Link 一样*/}
      {/* 声明式 */}
      {/* <NavLink  to="/home">home</NavLink> */}
      {/* ---- */}
      {/* <NavLink to="/about">about</NavLink> */}
      {/* ---- */}
      {/* <NavLink to="/home/homes">homes</NavLink> */}

      {/* 展示视图 */}
      {/* 1. component=值必须是组件 */}
      {/* 精准匹配 */}
      {/* <Route exact path="/home" component = { Home }/>
      <Route exact path="/about" component = { About }/>
      <Route exact path="/home/homes" component = { Homes }/> */}
{/* 
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/detail/:id" component={Detail} />
      </Switch> */}



      {/* 2. render = 值是函数（1.可以拓展dom结构） */}
      {/* <Switch> */}
        {/* <Route path="/home" render={(props) => {
          // props  为路由信息
          return <Home />
        }} />
        <Route path="/about" render={() => {
          return <About />
        }} />
         <Route path="/detail" render={() => {
          return <Detail />
        }} /> */}
      {/* </Switch> */}
      {/* 3. children */}

      {/* <Switch>
        <Route path="/home">
          <Home />
        </Route>

        <Route path="/about">
          <About/>
        </Route>

        <Route path="/detail">
          <Detail/>
        </Route>
      </Switch> */}

      {/* <Redirect to="/home" from="/" /> */}
    </div>
  );
}

export default App;
